import { renderHeader } from "./components/render-header.mjs";
import { renderFilter } from "./components/render-filter.mjs";
import { renderBody } from "./components/render-body.mjs";
import { renderFooter } from "./components/render-footer.mjs";
import { restoreScrollPosition } from "./utils/scroll-position.mjs";
import viewmode from "../lib/viewmode.mjs";
import render_helper from "../lib/render_helper.mjs";
import datarover from "../lib/datarover.mjs";
import { nearest_render } from "../lib/nearest.mjs";
import { thin } from "../thin3.mjs";
import { after } from "../lib/delay_render.mjs";

/**
 * 创建并渲染表格视图
 * @param {HTMLElement} container - 容器元素
 * @param {Object} template - 表格配置模板
 */
export default function (container, template) {
  // console.log(template);
  // 确定渲染模式
  let mode =
    template.mode || (viewmode(container) === "read" ? "read" : "edit");
  // console.log({ mode, template });
  // 创建表格容器
  let gridview = document.createElement("gridview");
  container.appendChild(gridview);
  gridview.thin_render = render;
  gridview.thin_render();

  function render() {
    // 处理自动高度
    let override = {};
    if (template.height === "auto") {
      override.height = undefined;
      after(function () {
        let parent = gridview.offsetParent;
        if (!parent) return;

        // 获取父容器的内边距
        let parentStyle = window.getComputedStyle(parent);
        let parentPaddingTop = parseInt(parentStyle.paddingTop) || 0;
        let parentPaddingBottom = parseInt(parentStyle.paddingBottom) || 0;

        // 设置高度，使用 calc 以支持窗口缩放
        gridview.style = `height: calc(100% - ${gridview.offsetTop}px - ${parentPaddingBottom}px)`;
      });
    }
    render_helper(gridview, { ...template, ...override });

    // 创建表格基本结构
    let table = document.createElement("table");
    gridview.appendChild(table);
    if (template.data) table.thin_data = template.data;

    let colgroup = document.createElement("colgroup");
    table.appendChild(colgroup);

    let thead = document.createElement("thead");
    table.appendChild(thead);
    let headerrow = document.createElement("tr");
    thead.appendChild(headerrow);

    // 获取数据
    let data;
    if (template.groupdatapath) {
      // 如果有分组，获取分组数据
      data = datarover(container, template.groupdatapath) || [];
    } else {
      // 否则获取普通数据
      data = template.data || datarover(container, template.datapath);
      if (!data && template.datapath) {
        data = [];
        datarover(container, template.datapath, data);
      }
    }

    // 渲染各个部分
    renderHeader(gridview, template, colgroup, headerrow);
    renderFilter(thead, template, headerrow, template.onfilter);
    renderBody(table, data, template, mode);
    renderFooter(table, template, mode);

    // 理固定列
    thin("th.fixed,td.fixed", thead).each((node) => {
      node.style.cssText = `left:${node.offsetLeft}px`;
    });
    thin(
      "tbody th.fixed,tbody td.fixed,tfoot th.fixed,tfoot td.fixed",
      table
    ).each((node) => {
      node.style.cssText = `left:${node.offsetLeft - table.offsetLeft}px`;
    });

    // 恢复滚动位置
    restoreScrollPosition(gridview, template);
  }
}
